import React, { useEffect, useState } from 'react';
import style from './one.module.css';
import { summerweather, Holidaydata } from "../../../../../../compoents/icons";
import { PlusCircleOutlined } from '@ant-design/icons';

function Holidayhottopics() {
  const picture = () => {
    console.log(1112);
  }
  //是否显示左按钮
  const [leftflag1, setLeftFlag1] = useState(false)
  const [rightflag1, setRightFlag1] = useState(true)
  const [bool, setBool] = useState(false)
  //向左移动的偏移量
  const [leftPosition, setLeftPosition] = useState(0);
  //样式
  const [contentStyle1, setContentStyle1] = useState({
    width: '3100px',
    height: "100%",
    display: "flex",
    position: "absolute",
    transition: "left 0.3s linear",
    top: '0',
    left: "0"
  })
  const toright1 = () => {
    // 重置到最左边  
    setLeftPosition(prev => prev + 760);
    setBool(false)
  }
  const toleft1 = () => {
    setLeftPosition(prev => prev - 760);
    setLeftFlag1(true)
  }


  useEffect(() => {
    setContentStyle1(pre => ({
      ...pre,
      left: `${leftPosition}px`
    }))
    if (leftPosition <= -1400) {
      setRightFlag1(false)
      setLeftFlag1(true)
      setTimeout(() => {
        setBool(true)
      }, 500);
    }
    else if (leftPosition >= 0) {
      setRightFlag1(true)
      setLeftFlag1(false)
    }
  }, [leftPosition])
  return (
    <div className={style.Holidayhottopics}>
      <ul className={style.Holidayhottopicsul}>
        {
          Holidaydata.map((item, index) => (
            <li key={index}>
              <div className={style.imageWrapper}>
                <img src={item.img1} alt="" />
                <div className={style.Solartermelements}>
                  <h1>{item.name}</h1>
                  <p>582 张</p>
                </div>
                <div className={style.overlay}>
                  <div className={style.overlay_content}>
                    <ul className={style.overlay_contentul}>
                      {
                        item.childimg.map((v, i) => (
                          <li key={i}>
                            <img src={v} alt="" />
                          </li>
                        ))
                      }
                    </ul>
                    <h2 className={style.h2}>{item.name}</h2>
                    <p className={style.zhang}>582 张</p>
                    <div className={style.butgeng}>立即查看</div>
                  </div>
                </div>
              </div>
            </li>
          ))
        }
      </ul>
      <div className={style.button} onClick={picture}>
        <span>更多素材</span>
      </div>
      <div className={style.ban1}>
        <h2>夏季天气</h2>
        <div className={style.log1}>
          <ul style={{ ...contentStyle1 }}>
            {
              summerweather.map((item, index) => {
                return <li key={index} className={style.logimg1}>
                  <img src={item.img} alt="" className={style.logim1} />
                </li>
              })
            }
          </ul>
          {
            leftflag1 ? <i className={style.zuo1} onClick={toright1}>&lt; </i> : ''
          }
          {
            rightflag1 ? <i className={style.you1} onClick={toleft1}> &gt;</i> : ''
          }
          {
            bool ? <div className={style.icon}><PlusCircleOutlined /></div> : ''
          }
        </div>
      </div>
    </div>
  );
}

export default Holidayhottopics;